<template>
	<view class="content">
		<Header title="修改密码" :backshow="false"></Header>
		<view class="toubu">
			<view class="content_content_con shadow">
				<view class="yinhangka_guanli_list" v-for="(item,index) in yinhanka_xinxi" :key="index">
					<view class="yinhangka_name">{{item.name}}</view>
					<view class="qianhui_ziti yinhangka_zhi">
						<input v-if="item.type=='number'" :disabled="item.show" :placeholder="item.placeholder" 
							type="number" class="input_inpit" :class="{yinhangka_code:index == 1}"
							placeholder-class="input_inpits" v-model="item.zhi" :maxlength="item.maxlength" />
						<input v-else :placeholder="item.placeholder" :disabled="item.show" type="password"
							class="input_inpit" :class="{yinhangka_code:index == 1}" placeholder-class="input_inpits"
							v-model="item.zhi" :maxlength="item.maxlength" />
						<view class="two_four zhuce_color" v-if="index==1">
							<text class="two_four zhuce_color" v-show="shows" @click="huoqu">获取验证码</text>
							<text class="two_four honse_ziti" v-show="!shows">{{count}}s</text>
						</view>
					</view>
				</view>
			</view>

			<view class="anniu" style="margin-top:100rpx" @click="tixian">完成</view>

		</view>
		  <requestLoading></requestLoading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tishi: 1 ,//展示加载动画
				show: false, //昵称弹框
				yinhanka_xinxi: [{
					name: '手机号',
					placeholder: '请输入手机号',
					zhi: '',
					type: 'text',
					show: true
				}, {
					name: '验证码',
					placeholder: '请输入验证码',
					zhi: '',
					type: 'number',
					maxlength: '4',
					show: false
				}, {
					name: '新密码',
					placeholder: '请输入新密码',
					zhi: '',
					type: 'text',
					maxlength: '16',
					show: false
				}, {
					name: '确认密码',
					placeholder: '请再次输入密码',
					zhi: '',
					type: 'text',
					maxlength: '',
					show: false
				}],
				count: '', //倒计时
				timer: null, //计时器
				shows: true, //是否显示倒计时
			}
		},
		onLoad() {
			this.yinhanka_xinxi[0].zhi=uni.getStorageSync('userinfo').user.phonenumber
		},
		methods: {
			tixian() {
				var that = this;

				if (that.yinhanka_xinxi[1].zhi.length != 4) {
					uni.showToast({
						title: '验证码格式错误',
						icon: "none"
					});
					return false;
				}

				if (!that.publics.password.test(that.yinhanka_xinxi[2].zhi)) { // 判断密码
					uni.showToast({
						title: '密码格式错误,拼音+数字,不能低于六位',
						icon: "none"
					});
					return false;
				};

				if (that.yinhanka_xinxi[2].zhi !== that.yinhanka_xinxi[3].zhi) {
					uni.showToast({
						title: '两次密码不一致',
						icon: "none"
					});
					return false;
				}


				this.configure.ajax({
					url: '',
					tishi: that.tishi,
					data: {
						code:that.yinhanka_xinxi[1].zhi, //验证码
						password:that.yinhanka_xinxi[2].zhi, //密码
					},
					method: 'POST',
					success: function(res) {
						uni.showToast({
							title: '修改成功',
							icon: "none"
						});
						// setTimeout(() => {
						// 	that.publics.redirectTo("/view/public/login")
						// }, 500);
					}
				})


			},
			huoqu() {
				var that = this;
				this.jiekou.send({
					url: '',
					phone: '', //邮箱
					success: function(res) {
						const TIME_COUNT = 60;
						if (!that.timer) {
							that.count = TIME_COUNT;
							that.shows = false;
							that.timer = setInterval(() => {
								if (that.count > 0 && that.count <= TIME_COUNT) {
									that.count--;
								} else {
									that.shows = true;
									clearInterval(that.timer);
									that.timer = null;
								}
							}, 1000)
						}
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				})
			},
		}
	}
</script>
<style scoped lang="scss">
	.yinhangka_guanli_list {
		line-height: 90rpx;
		border-bottom: 2rpx solid $qianhui_eee;
		display: flex;
		justify-content: flex-start;
		color: $heise_ziti;
	}

	.yinhangka_guanli_list:last-child {
		border-bottom: 0rpx;
	}

	.yinhangka_name {
		width: 130rpx;
		text-align-last: justify;
		margin-right: 40rpx;
		font-size: 30rpx;
	}

	.yinhangka_zhi {
		width: calc(100% - 170rpx);
		display: flex;
		align-items: center;
		justify-content: space-between;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-left: 16rpx;
		}
	}

	.input_inpit {
		width: 100%;
		font-size: 28rpx;
		color: $qianhuione_ziti;
		border: 0rpx;
	}

	.yinhangka_code {
		width: calc(100% - 130rpx);
	}

	.input_inpits {
		font-size: 24rpx;
		color: $qianhui_ziti;
	}
</style>
